<script lang="ts">
	import { Tooltip } from 'flowbite-svelte'
	import type {
		IndicatorActionWrap,
		IpcResponse,
		Klt,
		ListParams,
		SecurityFilter,
	} from './bindings'
	import * as commands from '$lib/commands'
	import {
		Table,
		TableBody,
		TableBodyCell,
		TableBodyRow,
		TableHead,
		TableHeadCell,
		Checkbox,
		TableSearch,
	} from 'flowbite-svelte'
	import { onDestroy, onMount } from 'svelte'
	import type { CorrelationMatrix } from './bindings/CorrelationMatrix'

	export let security_id: string
	export let klt: Klt
	export let size: number

	let correlationMatrix: CorrelationMatrix = { matrix: [], indicator_items: [] }

	onMount(async () => {
		console.log(
			`(IndicatorsCorrelationMatrix) onMount with security_id=${security_id}, klts:, klt=${klt}, size=${size} `,
		)

		try {
			//
			// Define the argument
			const args: ListParams<SecurityFilter> = {
				page: 0,
				size: size,
				filter: { id: security_id, klt: klt, name: null },
			}
			//
			const res: IpcResponse<CorrelationMatrix> =
				await commands.list_indicators_correlation_matrix(args)
			//
			if (res.error) {
				// If the response status is not OK, throw an error
				throw new Error(`(securities/+page.ts)Server returned an error: ${res.error}`)
			}
			//
			// If the server response is empty, return sample data
			if (res.result) {
				correlationMatrix = res.result.data
			}
			//
		} catch (error) {
			// If there's any error (e.g., network issue), return sample data
			console.error('Error fetching securities:', error)
			//
			correlationMatrix = { matrix: [], indicator_items: [] }
		}
	})

	onDestroy(() => {
		// 销毁订阅
	})

	function colorValue(value: number) {
		if (Math.abs(value) > 0.6) {
			return 'bg-red-500'
		} else if (0.4 < Math.abs(value) && Math.abs(value) < 0.6) {
			return 'bg-green-500'
		} else if (0.2 < Math.abs(value) && Math.abs(value) < 0.4) {
			return 'bg-blue-500'
		} else {
			return 'bg-gray-200'
		}
	}
</script>

<Table hoverable={true}>
	<TableHead defaultRow={false}>
		<tr
			class="bg-gray-400 text-center text-xs font-medium text-gray-900 uppercase sticky top-0 z-10"
		>
			<TableHeadCell padding="pr-2" class="text-nowrap sticky left-0 bg-gray-400">
				指标名称
			</TableHeadCell>
			<TableHeadCell padding="pr-2" class="text-nowrap whitespace-nowrap">弱相关</TableHeadCell>

			<!-- Add a guard clause -->
			{#each correlationMatrix.indicator_items as column, index}
				<TableHeadCell padding="pr-2" class="text-wrap">{column}</TableHeadCell>
			{/each}
		</tr>
	</TableHead>
	<TableBody tableBodyClass="divide divide-solid divide-green-200 text-xs text-gray-500">
		{#each correlationMatrix.indicator_items as row, i}
			<TableBodyRow class="hover:bg-blue-300 focus-within:bg-blue-500 bg-gray-200">
				<TableBodyCell
					tdClass="pr-1"
					class="text-sm fond-bold fond-medium uppercase sticky left-0 bg-gray-300"
				>
					{i}.{row}
				</TableBodyCell>

				<TableBodyCell tdClass="pr-1">
					<button class="text-xs bg-blue-600 text-white px-2 py-1 rounded-sm">复制</button>
				</TableBodyCell>
				{#each correlationMatrix.indicator_items as col, j}
					<TableBodyCell tdClass="pr-1">
						<span class="p-1 {colorValue(correlationMatrix.matrix[i][j])}">
							{correlationMatrix.matrix[i][j].toFixed(4)}
						</span>
					</TableBodyCell>
				{/each}
			</TableBodyRow>
		{/each}
	</TableBody>
</Table>
